export default React.createClass({
    render() {
        return (
            <div>
                <div ui-butterbar></div>
                <a href className="off-screen-toggle hide" ui-toggle-class="off-screen" data-target=".app-aside"></a>
                <div className="app-content-body fade-in-up">
                    <div className="hbox hbox-auto-xs hbox-auto-sm"
                         ng-init="app.settings.asideFolded = false;app.settings.asideDock = false;">
                        <div className="col">
                            <div className="bg-light lter b-b wrapper-md">
                                <div className="row">
                                    <div className="col-sm-6 col-xs-12">
                                        <h1 className="m-n font-thin h3 text-black">工作台</h1>
                                        <small className="text-muted">欢迎进入BPP平台</small>
                                    </div>
                                    <div className="col-sm-6 text-right hidden-xs">
                                        <div className="inline m-r text-left">
                                            <div className="m-b-xs">1290 <span class="text-muted">items</span></div>
                                            <div
                                                ng-init="data1=[ 106,108,110,105,110,109,105,104,107,109,105,100,105,102,101,99,98 ]"
                                                ui-jq="sparkline"
                                                ui-options=" {type:'bar', height:20, barWidth:5, barSpacing:1, barColor:'#dce5ec'}"
                                                className="sparkline inline">loading...
                                            </div>
                                        </div>
                                        <div className="inline text-left">
                                            <div className="m-b-xs">$30,000 <span class="text-muted">revenue</span>
                                            </div>
                                            <div
                                                ng-init="data2=[ 105,102,106,107,105,104,101,99,98,109,105,100,108,110,105,110,109 ]"
                                                ui-jq="sparkline"
                                                ui-options=" {type:'bar', height:20, barWidth:5, barSpacing:1, barColor:'#dce5ec'}"
                                                className="sparkline inline">loading...
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="wrapper-md">

                                <div className="row">
                                    <div className="col-md-5">
                                        <div className="row row-sm text-center">
                                            <div className="col-xs-6">
                                                <div className="panel padder-v item">
                                                    <a ui-sref="app.ProcessDef.task">
                                                        <div className="h1 text-info font-thin h1">521</div>
                                                        <span
                                                            className="text-muted text-xs">{this.props.children}待办事项</span>

                                                        <div className="top text-right w-full">
                                                            <i className="fa fa-caret-down text-warning m-r-sm"></i>
                                                        </div>
                                                    </a>
                                                </div>

                                            </div>
                                            <div className="col-xs-6">
                                                <a href className="block panel padder-v bg-primary item">
                                                    <span className="text-white font-thin h1 block">930</span>
                                                    <span className="text-muted text-xs">Uploads</span>
                                                    <span className="bottom text-right w-full">
                                                      <i className="fa fa-cloud-upload text-muted m-r-sm"></i>
                                                    </span>
                                                </a>
                                            </div>
                                            <div className="col-xs-6">
                                                <a href className="block panel padder-v bg-info item">
                                                    <span className="text-white font-thin h1 block">432</span>
                                                    <span className="text-muted text-xs">Comments</span>
                <span className="top text-left">
                  <i className="fa fa-caret-up text-warning m-l-sm"></i>
                </span>
                                                </a>
                                            </div>
                                            <div className="col-xs-6">
                                                <div className="panel padder-v item">
                                                    <div className="font-thin h1">129</div>
                                                    <span className="text-muted text-xs">Feeds</span>

                                                    <div className="bottom text-left">
                                                        <i className="fa fa-caret-up text-warning m-l-sm"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="col-xs-12 m-b-md">
                                                <div className="r bg-light dker item hbox no-border">
                                                    <div className="col w-xs v-middle hidden-md">
                                                        <div ng-init="data1=[60,40]" ui-jq="sparkline"
                                                             ui-options="{{data1}}, {type:'pie', height:40, sliceColors:['{{app.color.warning}}','#fff']}"
                                                             className="sparkline inline"></div>
                                                    </div>
                                                    <div className="col dk padder-v r-r">
                                                        <div className="text-primary-dk font-thin h1">
                                                            <span>$12,670</span></div>
                                                        <span
                                                            className="text-muted text-xs">Revenue, 60% of the goal</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-md-7">
                                        <div className="panel wrapper">
                                            <label className="i-switch bg-warning pull-right" ng-init="showSpline=true">
                                                <input type="checkbox" ng-model="showSpline"/>
                                                <i></i>
                                            </label>
                                            <h4 className="font-thin m-t-none m-b text-muted">Latest Campaign</h4>

                                            <div ui-jq="plot" ui-refresh="showSpline" ui-options="
                                              [
                                                { data: , label:'TV', points: { show: true, radius: 1}, splines: { show: showSpline, tension: 0.4, lineWidth: 1, fill: 0.8 } },
                                                { data: , label:'Mag', points: { show: true, radius: 1}, splines: { show: showSpline, tension: 0.4, lineWidth: 1, fill: 0.8 } }
                                              ],
                                              {
                                                colors: [],
                                                series: { shadowSize: 3 },
                                                xaxis:{ font: { color: '#a1a7ac' } },
                                                yaxis:{ font: { color: '#a1a7ac' }, max:20 },
                                                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#dce5ec' },
                                                tooltip: true,
                                                tooltipOpts: { content: 'Visits of %x.1 is %y.4',  defaultTheme: false, shifts: { x: 10, y: -25 } }
                                              }
                                            ">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className="panel wrapper">
                                    <div className="row">
                                        <div className="col-md-6 b-r b-light no-border-xs">
                                            <a href className="text-muted pull-right text-lg"><i
                                                class="icon-arrow-right"></i></a>
                                            <h4 className="font-thin m-t-none m-b-md text-muted">My Tasks</h4>

                                            <div className=" m-b">
                                                <div className="m-b">
                                            <span className="label text-base bg-warning pos-rlt m-r"><i
                                                className="arrow right arrow-warning"></i> 19:30</span>
                                                    <a href>Feed cat</a>
                                                </div>
                                                <div className="m-b">
                                            <span className="label text-base bg-info pos-rlt m-r"><i
                                                className="arrow right arrow-info"></i> 12:30</span>
                                                    <a href>Fishing Time</a>
                                                </div>
                                                <div className="m-b">
                                            <span className="label text-base bg-primary pos-rlt m-r"><i
                                                className="arrow right arrow-primary"></i> 10:30</span>
                                                    <a href>Kick-off meeting</a>
                                                </div>
                                                <div className="m-b">
                                            <span className="label text-base bg-light pos-rlt m-r"><i
                                                className="arrow right arrow-light"></i> 07:30</span>
                                                    <a href>Morning running</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="col-md-6">
                                            <div className="row row-sm">
                                                <div className="col-xs-6 text-center">
                                                    <div ui-jq="easyPieChart" ui-options="{
                    percent: 75,
                    lineWidth: 4,
                    trackColor: '',
                    barColor: '',
                    scaleColor: false,
                    size: 115,
                    rotate: 90,
                    lineCap: 'butt'
                  }" className="inline m-t">
                                                        <div>
                                                            <span className="text-primary h4">75%</span>
                                                        </div>
                                                    </div>
                                                    <div className="text-muted font-bold text-xs m-t m-b">Work Done
                                                    </div>
                                                </div>
                                                <div className="col-xs-6 text-center">
                                                    <div ui-jq="easyPieChart" ui-options="{
                    percent: 50,
                    lineWidth: 4,
                    trackColor: '',
                    barColor: '',
                    scaleColor: false,
                    size: 115,
                    rotate: 180,
                    lineCap: 'butt'
                  }" className="inline m-t">
                                                        <div>
                                                            <span className="text-info h4">50%</span>
                                                        </div>
                                                    </div>
                                                    <div className="text-muted font-bold text-xs m-t m-b">Started</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        )
    }
})